<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" title="关单卫检" :title-size="36" :title-bold="true"
			:title-color="textColor" :background="{backgroundColor: '#f8f8f8'}">
		</u-navbar>
		<view class="u-p-35">
			<view style="background-color: #fff;border-radius: 20rpx;" class="u-p-30">
				<view class="u-text-center u-m-b-45">
					<text style="color: #999;background-color: #f8f8f8;font-size: 24rpx; padding:6rpx 20rpx;border-radius: 18rpx;">
						合同编号  {{billDetails.contractNo}}
					</text>
				</view>
				<view class="u-flex">
					<view style="color: #999;">当前商品</view>
					<view class="u-m-l-20"> 
						<b>
							{{itemName}}
						</b>
					</view>
				</view>
				<view class="u-flex u-m-t-26">
					<view style="color: #999;">上传日期</view>
					<view class="u-m-l-20"> 
						<b>
							{{productDate}}
						</b>
					</view>
				</view>
				<view class="u-flex u-m-t-36 u-m-b-20" style="border: 2px solid #FF551A; padding: 7rpx 16rpx;display: inline-block;border-radius: 28rpx;">
					<u-icon name="attach" color="#FF551A" :custom-style="{fontWeight:500}"></u-icon>
					<text class="u-m-l-10" style="color:#FF551A;font-weight: 500;">附件</text>
				</view>
				<view class="u-flex " style="flex-wrap: wrap;">
					<image :src="item.url" :lazy-load="true" 
					:class="{'u-m-r-20':(index+1)%4!==0}" @click="previewImg(index)" 
					style="width: 140rpx;height: 140rpx;margin-bottom: 20rpx;" v-for="(item,index) in billDetails.resourceUrls" :key="item.id"></image>
				</view>
				<view style="color: #999;margin: 26rpx 0;">卫检商品明细</view>
				<view class="u-flex u-m-b-20" v-for="item in billDetails.items" :key="item.id">
					<image :src="item.itemResourceUrl" mode="" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;"></image>
					<view class="u-m-l-20"  style="flex: 1;">
						<view style="font-weight: 500;">{{item.itemName}}</view>
						<view class="u-flex u-row-between">
							<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
								{{item.specification}}
							</view>
							<view>
								<!-- <text class="u-font-24" style="color: #999;margin-right: 20rpx;">生产日期</text> -->
								<u-icon name="order" color="#999"></u-icon>
								<text class="u-font-24 u-m-l-10">{{$fui.dateFormatter(item.dateOfManufacture,'yyy-mm-dd')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				billDetails:{},
				loading:false,
				dockReceiptId:'',
				itemName:'',
				productDate:"",
			}
		},
		onLoad(option) {
			this.dockReceiptId = option.id;
			this.itemName = option.itemName;
			this.productDate = option.productDate;
			this.getBillDetailsFn();
		},
		methods: {
			async getBillDetailsFn(){
				this.loading = true;
				let params = {
					dockReceiptId:this.dockReceiptId
				}
				const res = await this.$newHttp.get('api/Product/GetDockReceipt',{params:params});
				this.loading = false;
				if(res.code === 200){
					this.billDetails = res.data;
				}else{
					this.$u.toast('获取关单详情失败，错误信息：'+res.erroMessage)
				}
			},
			// 预览图片
			previewImg(index) {
				const imageArr = this.billDetails.resourceUrls.map((row) => {
					return row['url'];
				});
				uni.previewImage({
					current: index,
					urls: imageArr,
					indicator: 'number',
					loop: true
				});
			},
		}
	}
</script>

<style>

</style>
